/*
* 优惠券数据统计页面
* @Author: Li Yujie
* @Date: 2020-11-14
*/
<template>
    <div class="wrapper">
        <!-- header -->
        <div class="header">
            <div class="header-title">
                数据统计
            </div>
            <div class="date">
                <div style="margin-right: 24px">数据统计最新时间：{{ statisticsTime }}</div>
                <el-date-picker
                    v-model="dateTimeRange"
                    type="datetimerange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :default-time="['00:00:00', '23:59:59']"
                    size="small"
                    style="width: 400px"
                    value-format="timestamp"
                />
            </div>
        </div>
        <!-- /header -->

        <!--优惠券数据-->
        <div class="data-card">
            <div class="card-item">
                <div class="card-title">优惠券数据</div>
                <div class="card-content base-data">
                    <div class="base-data-item">
                        <div class="title">
                            发放总量
                            <el-popover
                                placement="bottom"
                                width="200"
                                trigger="hover"
                                content="本优惠券发放的总数量">
                                <el-button slot="reference">
                                    <i class="el-icon-question"/>
                                </el-button>
                            </el-popover>
                        </div>
                        <div
                            class="bar"
                            :style="`flex: ${statisticsData.total_num ? 1 : 0}`"
                        />
                        <div class="count">{{ statisticsData.total_num }}张</div>
                    </div>
                    <div class="base-data-item">
                        <div class="title">
                            领券数量
                            <el-popover
                                placement="bottom"
                                width="200"
                                trigger="hover"
                                content="本优惠券已经被用户领取的数量">
                                <el-button slot="reference">
                                    <i class="el-icon-question"/>
                                </el-button>
                            </el-popover>
                        </div>
                        <div
                            class="bar warning"
                            :style="`flex: ${statisticsData.get_count / statisticsData.total_num}`"
                        />
                        <div class="count">{{ statisticsData.get_count }}张</div>
                    </div>
                    <div class="base-data-item">
                        <div class="title">
                            使用数量
                            <el-popover
                                placement="bottom"
                                width="200"
                                trigger="hover"
                                content="本优惠券已经使用的数量">
                                <el-button slot="reference">
                                    <i class="el-icon-question"/>
                                </el-button>
                            </el-popover>
                        </div>
                        <div
                            class="bar danger"
                            :style="`flex: ${statisticsData.use_count / statisticsData.total_num}`"
                        />
                        <div class="count">{{ statisticsData.use_count }}张</div>
                    </div>
                </div>
            </div>
            <div class="card-item">
                <div class="card-title">用券客户数据</div>
                <div class="card-content">
                    <div class="content-item">
                        <div class="count">{{ statisticsData.use_old_student_count }} <span>人</span></div>
                        <span class="desc">
                            用券老客户数
                            <el-popover
                                placement="bottom"
                                width="200"
                                trigger="hover"
                                content="使用该优惠券的老用户数">
                                <el-button slot="reference">
                                    <i class="el-icon-question"/>
                                </el-button>
                            </el-popover>
                        </span>
                    </div>
                    <div class="content-item">
                        <div class="count">{{ statisticsData.use_new_student_count }} <span>人</span></div>
                        <span class="desc">
                            用券新客户数
                            <el-popover
                                placement="bottom"
                                width="200"
                                trigger="hover"
                                content="使用该优惠券的新用户数">
                                <el-button slot="reference">
                                    <i class="el-icon-question"/>
                                </el-button>
                            </el-popover>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <!--/优惠券订单数据-->

        <!--成交数据 订单数据-->
        <div class="data-card">
            <div class="card-item">
                <div class="card-title">成交数据</div>
                <div class="card-content">
                    <div class="content-item">
                        <div class="count">{{ statisticsData.order_money }} <span>元</span></div>
                        <span class="desc">
                            用券总成交金额
                            <el-popover
                                placement="bottom"
                                width="200"
                                trigger="hover"
                                content="使用该优惠券的订单付款总金额">
                                <el-button slot="reference">
                                    <i class="el-icon-question"/>
                                </el-button>
                            </el-popover>
                        </span>
                    </div>
                    <div class="content-item">
                        <div class="count">{{ statisticsData.discount_money }} <span>元</span></div>
                        <span class="desc">
                            优惠总金额
                            <el-popover
                                placement="bottom"
                                width="200"
                                trigger="hover"
                                content="使用该优惠券的优惠的总金额">
                                <el-button slot="reference">
                                    <i class="el-icon-question"/>
                                </el-button>
                            </el-popover>
                        </span>
                    </div>
                </div>
            </div>
            <div class="card-item">
                <div class="card-title">订单数据</div>
                <div class="card-content">
                    <div class="content-item">
                        <div class="count">{{ statisticsData.order_money_avg }} <span>元</span></div>
                        <span class="desc">
                            用券单笔单价
                            <el-popover
                                placement="bottom"
                                width="200"
                                trigger="hover"
                                content="用券总成交额/使用优惠券的付款订单数">
                                <el-button slot="reference">
                                    <i class="el-icon-question"/>
                                </el-button>
                            </el-popover>
                        </span>
                    </div>
                    <div class="content-item">
                        <div class="count">{{ statisticsData.goods_num }} <span>件</span></div>
                        <span class="desc">
                            购买商品件数
                            <el-popover
                                placement="bottom"
                                width="200"
                                trigger="hover"
                                content="使用该优惠券购买的商品数量">
                                <el-button slot="reference">
                                    <i class="el-icon-question"/>
                                </el-button>
                            </el-popover>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <!--/成交数据-->

        <!--费效比-->
        <div class="percent">
            <div class="card-title">
                费效比
                <span class="sub-title">费效比=优惠总金额 / 用券总成交额</span>
            </div>
            <div class="card-content">
                <div
                    class="percent-bar"
                    ref="percentBar"
                />
            </div>
        </div>
        <div
            class="percent"
            style="visibility: hidden"
        />
    </div>
</template>

<script>
import ECharts from 'echarts';
import {back} from '@/mixin/back';

export default {
    name: 'DataStatistics',
    data() {
        return {
            statisticsData: {},
            dateTimeRange: [],
            couponNo: '',
            start_time: '',
            end_time: '',
            statisticsTime: '',
            chart: {},
            screenWidth: document.body.clientWidth
        };
    },
    mixins: [back],
    watch: {
        dateTimeRange(value) {
            if (value) {
                this.start_time = value[0] / 1000;
                this.end_time = value[1] / 1000;
            } else {
                this.start_time = '';
                this.end_time = '';
            }
            this.getStatisticsData();
        },
        screenWidth (val) {
            if (!this.timer) {
                this.screenWidth = val;
                this.timer = true;

                setTimeout( () => {
                    this.chart.resize();
                    this.timer = false;
                }, 300);
            }
        }
    },

    mounted() {
        this.$store.commit('SET_HEADER', [{title: "APP后台"}, {title: '商城'}, {title: '优惠券'}, {title: '统计数据'}]);
        this.couponNo = this.$route.query.no;
        this.echartsBarInit();
        this.getStatisticsData();
        // 统计时间取当前时间前一天的最后一秒
        this.statisticsTime = this.$moment().subtract(1, 'days').endOf('day').format("YYYY-MM-DD HH:mm:ss");
        window.onresize = () => {
            return (() => {
                window.screenWidth = document.body.clientWidth;
                this.screenWidth = window.screenWidth;
            })();
        };
    },

    methods: {

        /**
         * @description 获取优惠券统计数据
         */
        getStatisticsData() {

            let params = {
                coupon_no: this.couponNo,
                start_time: this.start_time,
                end_time: this.end_time
            };

            this.$post('/student/shop_goods_coupon%5Cstatistic', params, resp => {
                if (resp.code === 1) {
                    this.statisticsData = resp.data;
                    this.echartsBarInit(resp.data.discount_percent);
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * 生成费效比百分条
         * @param percent
         */
        echartsBarInit(percent = 0) {
            this.chart = ECharts.init(this.$refs.percentBar);

            // label的偏移
            let offset = [-30, -21];
            let radius = [10, 0, 0, 10];

            // 进度条满，使用圆角
            if (percent === 300) {
                radius = [10, 10, 10, 10];
                offset = [-32, -21];
            } else if (percent >= 100) {
                offset = [-34, -21];
            } else if (percent === 0) {
                offset = [-10, -21];
            } else {
                // eslint-disable-next-line no-param-reassign
                percent = percent.toFixed(2);
            }

            this.chart.setOption({
                grid: {
                    width: '98%',
                    left: 0,
                    bottom: 10,
                    containLabel: true
                },
                xAxis: {
                    min: 0,
                    max: 300,
                    interval: 30,
                    type: 'value',
                    splitLine: {show: false},
                    axisLabel: {
                        show: true,
                        margin: 40,
                        interval: 0,
                        showMaxLabel: true,
                        formatter: function (value, index) {
                            return `${value}%`;
                        }
                    },
                    axisTick: {show: false},
                    axisLine: {show: false}
                },
                yAxis: {
                    type: 'category',
                    axisTick: {show: false},
                    axisLine: {show: false},
                    axisLabel: {
                        color: '#333',
                        fontSize: 14
                    },
                    data: ['费效比']
                },
                series: [
                    {
                        name: '%',
                        type: 'bar',
                        barWidth: 20,
                        // 设置百分比
                        data: [percent],
                        animationDuration: 1000,
                        label: {
                            show: true,
                            position: 'right',
                            offset: offset,
                            color: '#333',
                            fontSize: 14,
                            // 自定义label
                            formatter: function (params) {
                                return `{a|${params.value}%}\n{b|}`;
                            },
                            rich: {
                                a: {
                                    color: '#333',
                                    fontSize: 14,
                                },
                                b: {
                                    width: 2,
                                    height: 10,
                                    fontSize: 14,
                                    backgroundColor: '#1890FF',
                                    borderRadius: 4,
                                    align: 'center',
                                },
                            }
                        },
                        itemStyle: {
                            normal: {
                                barBorderRadius: radius,
                                color: '#1890FF'
                            }
                        },
                        zlevel: 1
                    },
                    // 背景
                    {
                        name: '进度条背景',
                        type: 'bar',
                        barGap: '-100%',
                        barWidth: 20,
                        data: [300],
                        color: '#D0E6F9',
                        itemStyle: {
                            normal: {
                                barBorderRadius: 10
                            }
                        },
                        emphasis: {
                            itemStyle: {
                                color: '#D0E6F9'
                            }
                        }
                    }
                ]
            });
        }
    },
};
</script>

<style lang="less" scoped>
.wrapper {
    width: 100%;
    display: flex;
    height: calc(100% - 24px);
    flex-direction: column;
    position: relative;
    margin: 12px;
    box-sizing: border-box;

    /*header*/

    .header {
        height: 68px;
        padding: 24px;
        background: #fff;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .header-title {
            color: #333333;
            font-size: 20px;
            height: 20px;
            font-weight: 500;
            position: relative;
            margin: 24px 0 24px 12px;

            &::before {
                content: '';
                position: absolute;
                left: -8px;
                top: -1px;
                width: 3px;
                height: 20px;
                background: #1890FF;
            }
        }

        .date {
            display: flex;
            align-items: center;
            font-size: 14px;
            color: #666;
        }
    }

    /*优惠券订单数据*/

    .data-card {
        width: 100%;
        height: 220px;
        margin-top: 12px;
        display: flex;

        .card-item {
            flex: 1;
            background: #fff;
            padding: 24px 32px;
            box-sizing: border-box;
            box-shadow: 0px -1px 0px 0px #F0F2F5;

            &:first-child {
                margin-right: 12px;
            }

            .card-title {
                font-size: 16px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #333333;
            }

            .card-content {
                height: 128px;
                margin-top: 28px;
                display: flex;

                .content-item {
                    flex: 1;
                    box-sizing: border-box;
                    padding: 20px 32px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;

                    .count {
                        border-bottom: 1px solid #EBEEF5;
                        width: 188px;
                        text-align: center;
                        font-size: 30px;
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-weight: 500;
                        color: rgba(0, 0, 0, 0.8);
                        padding: 12px;

                        span {
                            font-size: 18px;
                            color: #333;
                        }
                    }

                    .desc {
                        padding: 12px;
                        color: #333;
                        font-size: 14px;

                        /deep/ .el-button {
                            width: 10px;
                            border: none !important;
                            background: transparent !important;
                            padding: 0;
                        }

                        /deep/ .el-button:hover {
                            background: transparent !important;
                        }
                    }
                }
            }

            /*第一个数据卡片*/

            .base-data {
                display: flex;
                flex-direction: column;
                padding-left: 46px;
                box-sizing: border-box;

                .base-data-item {
                    flex: 1;
                    display: flex;
                    align-items: center;

                    .title {
                        font-size: 14px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #333;

                        /deep/ .el-button {
                            width: 10px;
                            border: none !important;
                            background: transparent !important;
                            padding: 0;
                        }

                        /deep/ .el-button:hover {
                            background: transparent !important;
                        }
                    }

                    .bar {
                        flex: 1;
                        height: 14px;
                        margin-left: 16px;
                        background: #1890FF;
                        border-radius: 7px;
                        transition: all 1s;

                        &.warning {
                            background: #FFB726;
                            flex: 0;
                        }

                        &.danger {
                            background: #FF2652;
                            flex: 0;
                        }
                    }

                    .count {
                        font-size: 18px;
                        font-weight: 500;
                        color: #333;
                        margin-left: 12px;
                    }
                }
            }
        }
    }

    /*费效比*/

    .percent {
        width: 100%;
        height: 186px;
        background: #fff;
        margin-top: 12px;
        padding: 24px 32px;
        box-sizing: border-box;
        box-shadow: 0px -1px 0px 0px #F0F2F5;

        .card-title {
            font-size: 16px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #333333;

            .sub-title {
                margin-left: 10px;
                font-size: 12px;
                font-weight: 400;
                color: #999999;
            }
        }

        .card-content {
            box-sizing: border-box;
            padding: 0 46px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            display: flex;
            height: 100%;
            align-items: center;
            position: relative;

            .percent-bar {
                flex: 1;
                margin-left: 12px;
                height: 100px;
            }
        }
    }
}
</style>
